<template>
  <div class="echarts-container">
    <el-card shadow="never" class="mb-2">
      <template #header>
        <h3 class="font-bold">基础</h3>
      </template>
      <echartsdemo />
    </el-card>
    <el-card shadow="never" class="mb-2">
      <template #header>
        <h3 class="font-bold">通过点击按钮切换不同的echarts数据</h3>
      </template>
      <el-radio-group v-model="radio1" class="ml-4" @change="changeType">
        <el-radio-button label="1">日销售</el-radio-button>
        <el-radio-button label="2">月销售</el-radio-button>
      </el-radio-group>
      <echartsdemo2 :init-data="initData" />
    </el-card>

    <el-card shadow="never" class="mb-2">
      <template #header>
        <h3 class="font-bold">地图3d效果</h3>
        <span>使用叠层和阴影来实现</span>
      </template>
      <echartsdemo3 />
    </el-card>
    <el-card shadow="never" class="mb-2">
      <template #header>
        <h3 class="font-bold">地图3d效果</h3>
        <span>使用echarts-gl实现</span>
      </template>
      <echartsdemo4 />
    </el-card>
    <el-card shadow="never" class="mb-2">
      <template #header>
        <h3 class="font-bold">实现地图下钻效果</h3>
      </template>
      <echartsdemo5 />
    </el-card>
  </div>
</template>
<script setup>
import echartsdemo from "./demo/echartsDemo.vue";
import echartsdemo2 from "./demo/echartsDemo2.vue";
import echartsdemo3 from "./demo/echartsDemo3.vue";
import echartsdemo4 from "./demo/echartsDemo4.vue";
import echartsdemo5 from "./demo/echartsDemo5.vue";
import { ref } from "vue";

const radio1 = ref("1");
const initData = ref({
  adidas: [10, 10, 30, 12, 15, 3, 7],
  nike: [5, 12, 11, 14, 25, 16, 10],
  beijing: [150, 120, 170, 140, 500, 160, 110],
});
const changeType = (val) => {
  if (val === "1") {
    initData.value = {
      adidas: [10, 10, 30, 12, 15, 3, 7],
      nike: [5, 12, 11, 14, 25, 16, 10],
      beijing: [150, 120, 170, 140, 500, 160, 110],
    };
    console.log("1");
  } else {
    initData.value = {
      adidas: [61, 25, 34, 115, 9, 80, 42],
      nike: [41, 129, 120, 13, 149, 174, 82],
      beijing: [38, 132, 37, 52, 163, 114, 170],
    };
    console.log("2");
  }
};
</script>

<style lang="scss" scoped>
.echarts-container {
  position: relative;
  padding: 20px;
}
</style>
